<template>
  <div class="w-full h-full bg-slate-200">
    <div class="w-full h-[5%] flex items-center p-2 *:m-1">
      <unit-add/>
      <r-search
          v-model:search_value="store.search_val"
          :columns_show="store.columns_show"
          :up-search-obj="store.search_obj"
          @on_search="store.on_search"
          @on_up_search="store.on_up_search"
      />
    </div>
    <div class="w-full">
      <unit-tb/>
      <div class="w-full m-5">
        <paginator
            :page="store.page"
            :total="store.total"
            @back="store.back"
            @go="store.go"
            @to_end="store.to_end"
            @to_head="store.to_head"
            @refresh="store.refresh"
            @page-size-change="() => console.log(111)"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {useUnitStore} from './unit/store'

const store = useUnitStore()

onMounted(store.get_units)
</script>